<template>
  <div class="applyContent apply-code">
    <!-- <div class="center applyTitle" v-if="applyType === 1">{{ $t('candyBox.newdexListApply') }}</div>
    <div class="center applyTitle" v-if="applyType === 2">{{ $t('candyBox.listApply')}}</div> -->
    <div class="center" style="margin-bottom:20px;">申请表</div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
      <!-- 申请类型 -->
      <el-form-item label="申请类型" prop="type">
        <el-select v-model.trim="form.type" @change="handleResetForm('form')">
          <template v-for="(item, index) in typeList">
            <el-option
            :key="index"
            :label="item.label"
            :value="item.value" />
          </template>
        </el-select>
      </el-form-item>
      <template v-if="form.type === 2">
        <!-- 项目名称 -->
        <el-form-item :label="$t('candyBox.projectName')" prop="name">
          <el-input v-model.trim="form.name" maxlength="50" clearable></el-input>
        </el-form-item>
        <!-- 所属链 -->
        <el-form-item :label="$t('candyBox.belongChain')" prop="chain">
          <el-select v-model.trim="form.chain">
            <template v-for="(item, index) in chainItems">
              <el-option
              v-if="item.value === 'EOS'"
              :key="index"
              :label="item.label"
              :value="item.value" />
            </template>
          </el-select>
        </el-form-item>
        <!-- Token 名称 -->
        <el-form-item :label="$t('candyBox.tokenName')" prop="code">
          <el-input v-model.trim="form.code" maxlength="50" clearable></el-input>
        </el-form-item>
      </template>
      <!-- 币种名称 -->
      <el-form-item :label="$t('candyBox.iconName')" prop="code" v-if="form.type === 1">
        <el-input v-model.trim="form.code" maxlength="50" clearable></el-input>
      </el-form-item>
      <!-- 合约地址 -->
      <el-form-item :label="$t('candyBox.contractName')" prop="contract">
        <el-input v-model.trim="form.contract" maxlength="12" clearable></el-input>
      </el-form-item>
      <!-- 官方地址 -->
      <el-form-item :label="$t('candyBox.offiAddress')" prop="website">
        <el-input v-model.trim="form.website" maxlength="255" clearable></el-input>
      </el-form-item>
      <!-- 空头总量 -->
      <el-form-item :label="`${$t('candyBox.airdropAmount')}${$t('candyBox.totalValue')}`" prop="airdropCount" v-if="form.type === 2">
        <el-input
          type="number"
          class="airdropCount"
          @mousewheel.native.prevent
          v-model.trim="form.airdropCount"
          @keyup.native="handleAirdropCount"
          clearable></el-input>
      </el-form-item>
      <!-- 联系方式 -->
      <el-form-item :label="$t('candyBox.contactWays')" prop="contact">
        <el-input v-model.trim="form.contact" maxlength="255" clearable></el-input>
      </el-form-item>
      <template v-if="form.type === 1">
        <!-- 上传图标 -->
        <!-- <el-form-item :label="$t('candyBox.uploadIcon')" v-if="form.type === 1">
          <el-upload
            class="avatar-uploader"
            action="111"
            :show-file-list="false"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :on-change="onchange"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <!-- 币种简介 -->
        <el-form-item :label="$t('candyBox.tokenIntroduction')" v-if="form.type === 1" class="introduction">
          <el-input type="textarea" v-model.trim="form.introduction" clearable></el-input>
        </el-form-item>
      </template>
      <!-- 项目介绍 -->
      <!-- <el-form-item label="项目介绍" v-if="form.type === 3" class="introduction">
        <el-input type="textarea" v-model.trim="form.introduction" clearable></el-input>
      </el-form-item> -->
      <!-- 提交 -->
      <el-form-item class="flexc submitForm">
        <el-button class="submitFormCont" type="primary" @click="handleApplyAction()">{{ $t('activity.submit') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { chainList, authorized } from '@/utils/validate';

export default {
  name: 'Apply', // 各种申请 上币申请 1，糖果盒子2，交易大赛3，
  components: {
  },
  data() {
    return {
      form: {
        name: '', // 项目名称
        code: '', // token名称
        code1: '',
        contract: '', // 合约名称
        website: '', // 官网
        airdropCount: '', // 空投总量
        contact: '', // 联系方式
        chain: 'EOS',
        type: 1, // 上币申请 1，糖果盒子2，交易大赛3，
        introduction: '', // 币种介绍
        logoUrl: '', // 图片地址
      },
      chainItems: [],
      rules: {
        name: [
          { required: true, message: this.$t('candyBox.enterProjectName'), trigger: 'blur' },
        ],
        code: [
          { required: true, message: this.$t('candyBox.enterTokenName'), trigger: 'blur' },
        ],
        code1: [
          { required: true, message: this.$t('candyBox.enterTokenName1'), trigger: 'blur' },
        ],
        contract: [
          { required: true, message: this.$t('candyBox.enterContractAddress'), trigger: 'blur' },
        ],
        website: [
          { required: true, message: this.$t('candyBox.enterWebsiteAddress'), trigger: 'blur' },
        ],
        airdropCount: [
          { required: true, message: this.$t('candyBox.enterAirdropAmount'), trigger: 'blur' },
        ],
        contact: [
          { required: true, message: this.$t('candyBox.enterContactWay'), trigger: 'blur' },
        ],
        // introduction: [
        //   { required: true, message: this.$t('candyBox.enterContactWay'), trigger: 'blur' },
        // ]
      },
      imageUrl: '', // 图片路径
      typeList: [
        {
          value: 1,
          label: '上币申请',
        },
        {
          value: 2,
          label: '糖果空投',
        },
        {
          value: 3,
          label: '交易大赛',
        }
      ]
    };
  },
  props: {
    applyDialog: {
      type: Boolean,
      default: false,
    },
    applyType: Number, // 上币申请1，糖果盒子2，交易大赛3
  },
  watch: {
    applyDialog: function change(val) {
      if (val) {
        this.handleResetForm();
      }
    },
    '$store.state.app.language': function change() {
      this.rules = {
        name: [
          { required: true, message: this.$t('candyBox.enterProjectName'), trigger: 'blur' },
        ],
        code: [
          { required: true, message: this.$t('candyBox.enterTokenName'), trigger: 'blur' },
        ],
        code1: [
          { required: true, message: this.$t('candyBox.enterTokenName1'), trigger: 'blur' },
        ],
        contract: [
          { required: true, message: this.$t('candyBox.enterContractAddress'), trigger: 'blur' },
        ],
        website: [
          { required: true, message: this.$t('candyBox.enterWebsiteAddress'), trigger: 'blur' },
        ],
        airdropCount: [
          { required: true, message: this.$t('candyBox.enterAirdropAmount'), trigger: 'blur' },
        ],
        contact: [
          { required: true, message: this.$t('candyBox.enterContactWay'), trigger: 'blur' },
        ]
      };
    },
  },
  created() {
    this.chainItems = chainList();
  },
  mounted() {
    this.form.type = this.applyType;
  },
  beforeDestroy() {
  },
  methods: {
    // 重置表格
    handleResetForm(formName) {
      this.form.name = '';
      this.form.code = '';
      this.form.code1 = '';
      this.form.contract = '';
      this.form.contact = '';
      this.form.website = '';
      this.form.airdropCount = '';
      this.form.introduction = '';
      this.form.logoUrl = '';
      this.$refs[formName].clearValidate();
    },
    handleAirdropCount() {
      if (this.form.airdropCount > 999999999999) {
        this.form.airdropCount = 999999999999;
      }
      if (this.form.airdropCount < 0) {
        this.form.airdropCount = 0;
      }
    },
    // 提交
    handleApplyAction() {
      authorized(this, (code, res) => {
        if (code === 'error') { // 授权错误
          console.log(res); // eslint-disable-line
          return;
        }
        this.handleApplySubmit();
      });
    },
    // 提交到服务端
    handleApplySubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 判断有无登录
          const scat = this.$store.state.app.scatter;
          if (scat && !scat.identity) {
            this.$message.error(this.$t('public.signIn'));
            return;
          }
          const params = this.form;
          const code = this.form.code1 ? this.form.code1 : this.form.code;
          params.chain = this.form.chain.toLowerCase();
          params.code = code;
          this.$http.post('/candy/apply', params).then((res) => {
            if (res.code === 1019) {
              this.$message.error(this.$t('candyBox.applyBefore'));
              return;
            }
            if (res.code !== 0) {
              const msg = res.msg || 'System error'
              this.$message.error(msg);
              return;
            }
            const applyType = this.form.type === 1 ? this.$t('candyBox.dataSuccess') : this.$t('candyBox.applySuccess');
            // 成功
            this.$alert(applyType, {
              type: 'success',
              center: true,
              showConfirmButton: false,
              callback: () => {
                this.handleResetForm('form');
                // 关闭弹窗
                // this.$emit('listenApplyDialog', 'close', false);
              }
            })
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload() {
    },
    // 当上传图片后，调用onchange方法，获取图片本地路径
    onchange() {
      const ev = event || window.event;
      const file = ev.target.files[0];
      const reader = new FileReader();
      const isLt = file.size / 1024 / 1024 < 0.5;
      if (!isLt) {
        this.$message.error(this.$t('candyBox.notExceed'));
        return;
      }
      // 转base64
      reader.onload = (e) => {
        this.form.logoUrl = e.target.result // 将图片路径赋值给src
      }
      reader.readAsDataURL(file);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.applyContent /deep/ .el-select{
  width: 100%;
}

.apply-code {
  padding: 50px 50px 0;
}
.airdropCount {
  /deep/ .el-input__inner {
    padding-right: 5px !important;
    -moz-appearance: textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.introduction {
  /deep/ .el-textarea__inner {
    min-height: 70px !important;
  }
}

.submitForm {
   margin-bottom: 0;
  .submitFormCont {
    width: 200px;
  }
}

.applyTitle {
  margin-bottom: 20px;
  font-size: 20px;
}

.theme-278EDA {
}
.theme-1B1D27 {
  .apply-code {
    /deep/ .el-input__inner {
      color: #000;
      background: #fff;
    }
  }
}
</style>

